import React from 'react';
import { Form, Input, Select, Button, Upload, message, DatePicker } from 'antd';
import { PlusOutlined, CloseOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';

const { Option } = Select;

export default function ContractCreate() {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  // 上传图片模拟
  const uploadProps = {
    beforeUpload: (file) => {
      message.success(`${file.name} 上传成功`);
      return false;
    },
    showUploadList: false,
  };

  // 保存
  const handleSave = async () => {
    try {
      // 只校验五个字段
      const values = await form.validateFields([
        'tenant', 'building', 'room', 'attr', 'status'
      ]);
      // 构造新合同数据，签约时间和到期时间为固定值
      const newContract = {
        key: Date.now(),
        tenant: values.tenant,
        building: values.building,
        room: values.room,
        type: values.attr,
        status: values.status,
        signDate: '2020-05-17',
        expireDate: '2022-01-23',
      };
      navigate('/business/contract', { state: { newContract } });
    } catch (e) {
      message.error('请填写所有必填项');
    }
  };

  return (
    <div style={{ background: '#f5f7fa', minHeight: '100vh', padding: 32 }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', background: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: 32, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, borderBottom: '2px solid #eee', paddingBottom: 12 }}>
          <div style={{ width: 10, height: 24, background: '#4880ff', borderRadius: 2, marginRight: 12 }} />
          <span style={{ fontWeight: 700, fontSize: 22 }}>合同立项新增</span>
          <CloseOutlined style={{ position: 'absolute', right: 24, top: 32, fontSize: 28, cursor: 'pointer' }} onClick={() => navigate(-1)} />
        </div>
        <Form
          form={form}
          layout="vertical"
          style={{ display: 'flex', gap: 32, marginBottom: 40 }}
        >
          <div style={{ flex: 1, minWidth: 340, border: '1px solid #ccc', borderRadius: 12, padding: 24, marginBottom: 0 }}>
            <div style={{ fontWeight: 500, marginBottom: 16 }}>合同信息：</div>
            <Form.Item 
              label={<span style={{ color: 'red' }}>* 租户名称：</span>}
              name="tenant"
              rules={[{ required: true, message: '请输入租户名称' }]}
            >
              <Input placeholder="请输入租户名称" />
            </Form.Item>
            <Form.Item 
              label={<span style={{ color: 'red' }}>* 所属楼宇：</span>}
              name="building"
              rules={[{ required: true, message: '请选择' }]}
            >
              <Select placeholder="请选择"><Option value="A1幢">A1幢</Option><Option value="C2幢">C2幢</Option></Select>
            </Form.Item>
            <Form.Item 
              label={<span style={{ color: 'red' }}>* 房间名称：</span>}
              name="room"
              rules={[{ required: true, message: '请输入房间名称' }]}
            >
              <Input placeholder="请输入房间名称" />
            </Form.Item>
            <Form.Item 
              label={<span style={{ color: 'red' }}>* 合同类型：</span>}
              name="attr"
              rules={[{ required: true, message: '请选择' }]}
            >
              <Select placeholder="请选择"><Option value="新签">新签</Option><Option value="续签">续签</Option></Select>
            </Form.Item>
            <Form.Item 
              label={<span style={{ color: 'red' }}>* 合同状态：</span>}
              name="status"
              rules={[{ required: true, message: '请选择' }]}
            >
              <Select placeholder="请选择"><Option value="生效中">生效中</Option><Option value="到期">到期</Option><Option value="退租">退租</Option></Select>
            </Form.Item>
          </div>
        </Form>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <Button type="primary" style={{ width: 120, marginRight: 32 }} onClick={handleSave}>保存</Button>
          <Button style={{ width: 120 }} onClick={()=>navigate(-1)}>取消</Button>
        </div>
      </div>
    </div>
  );
} 